<template>
    <div class="drawer-content-item">
        <el-tabs v-model="detailCurrent" type="card" @tab-click="changeTabs">
            <el-tab-pane label="基本信息" name="1">
                <el-form label-suffix="：" label-position="top" >
                    <div class="item-title-box">用户信息</div>
                    <el-row :gutter="20" class="form-detail-top-box">
                        <el-col :span="6" >
                            <el-form-item label="头像" >
                                <imagePreview :url="form.userAvatar" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="姓名" >
                                {{ form.userRealName ||'-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="用户ID" >
                                {{ form.clientUserId ||'-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="邀请用户ID" >
                                {{ form.invitedUserId ||'-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="手机号" >
                                {{ form.phone ||'-' }}
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="6" >
                            <el-form-item label="用户渠道" >
                                {{ selectDictLabel(dict.type.user_channel,form.userChannel) || '-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="可用算力" >
                                {{ form.point ||'-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="累计充值金额" >
                                {{ form.totalRechargeAmount ||0 }}元
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="注册时间" >
                                {{ form.createTime ||'-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="微信openid" >
                                {{ form.wechatOpenId ||'-' }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="item-title-box">邀请信息</div>
                    <el-row :gutter="20" class="form-detail-top-box">
                        <el-col :span="3" >
                            <el-form-item label="邀请头像" >
                                <imagePreview :url="form.beInvitedUserAvatar" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" >
                            <el-form-item label="小程序码" >
                                <imagePreview :url="form.invitedOtherWechatQrCodeUrl" />
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="6" >
                            <el-form-item label="被邀请客户姓名" >
                                {{form.beInvitedUserRealName || '-' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" >
                            <el-form-item label="被邀请客户ID" >
                                {{ form.invitedClientUserId || '-' }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="音色" name="2">
                <el-table
                    v-loading="audioLoading"
                    :data="audioList"
                >   
                    <el-table-column  label="音色名称">
                        <template slot-scope="scope">
                            <div>{{ scope.row.name || '-' }} </div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="训练音频地址" min-width="200">
                        <template slot-scope="scope">
                            <div>{{ scope.row.trainingAudioUrl || '-' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="训练状态">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.trainingStatus == 1">训练中</el-tag>
                            <el-tag type="success" v-if="scope.row.trainingStatus == 2">训练成功</el-tag>
                            <el-tag type="danger" v-if="scope.row.trainingStatus == 1">训练失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column  label="标签">
                        <template slot-scope="scope">
                            <div>{{ selectDictLabel(dict.type.system_timbre_type,scope.row.tags) ||'-'}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="发布日期">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime || '-' }}</div>
                        </template>
                    </el-table-column>
                    
                </el-table>
                <pagination
                    :total="audioTotal"
                    :page.sync="audioParams.pageNum"
                    :limit.sync="audioParams.pageSize"
                    @pagination="getAudioList"
                >
                </pagination>
            </el-tab-pane>
            <!-- <el-tab-pane label="形象" name="3">

            </el-tab-pane> -->
            <el-tab-pane label="背景音乐" name="4">
                <el-table
                    v-loading="musicLoading"
                    :data="musicList"
                >   
                    <el-table-column  label="音乐名称">
                        <template slot-scope="scope">
                            <div>{{ scope.row.name || '-' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  label="音乐地址" min-width="200">
                        <template slot-scope="scope">
                        {{ scope.row.materiaFileUrl || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column  label="标签" width="80">
                        <template slot-scope="scope">
                            <div>  {{ selectDictLabel(dict.type.background_music_type,scope.row.tags) }}</div>
                        </template>
                    </el-table-column>
                    
                    
                
                    <el-table-column  label="发布日期">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime || '-' }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    :total="musicTotal"
                    :page.sync="musicParams.pageNum"
                    :limit.sync="musicParams.pageSize"
                    @pagination="getMusicList"
                >
                </pagination>
            </el-tab-pane>
            <!-- <el-tab-pane label="混剪" name="5">

            </el-tab-pane>
            <el-tab-pane label="海报" name="6">

            </el-tab-pane>
            <el-tab-pane label="音频" name="7">

            </el-tab-pane>
            <el-tab-pane label="文案" name="8">

            </el-tab-pane> -->

        </el-tabs>
    </div>
</template>
<script>
    import {detailClientUser} from '@/api/operateManage/userList'
    import {listAiPersonAudio,listMaterialList} from '@/api/materialManage/index.js'

    export default{
        dicts:['user_channel','system_timbre_type','background_music_type'],
        props: {
            id: {
                type: [Number,String],
                default: ''
            }
        },
        data() {
            return{
                detailCurrent:'1',
                form: {
                    
                },
                audioParams: {
                    pageSize: 10,
                    pageNum:1,
                    modelType:1
                },
                audioTotal: 0,
                audioLoading: false,
                audioList:[],
                musicParams: {
                    pageSize: 10,
                    pageNum:1,
                    materiaType: 2,
                    sourceType:1
                },
                musicLoading: false,
                musicTotal: 0,
                musicList:[]
            }
        },
        created() {
            this.getDetail()
        },
        methods: {
            getDetail() {
                detailClientUser({clientUserId: this.id}).then(res=> {
                    this.form = res.data
                })
            },
            changeTabs(e) {
                if(e.name == 2){
                    this.getAudioList()
                }else if(e.name == 4) {
                    this.getMusicList()
                }
            },
            getAudioList() {
                this.audioLoading = true
                this.audioParams.clientUserId = this.id
                listAiPersonAudio(this.audioParams).then(res=> {
                    this.audioList = res.data.records;
                    this.audioTotal = res.data.total;
                    this.audioLoading = false;
                })
            },
            getMusicList() {
                this.musicLoading = true
                this.musicParams.clientUserId = this.id
                listMaterialList(this.musicParams).then(res=> {
                    this.musicList = res.data.records;
                    this.musicTotal = res.data.total;
                    this.musicLoading = false;
                })
            }
        }
    }
</script>